<template>
  <div class="layout" :style="{'min-height': windowHeight}">
    <Layout>
      <Header class="header">
        <Menu mode="horizontal" theme="dark" active-name="1" :class="widthBool? 'width1200': ''">
          <div class="layout-logo">
            <img src="../../static/img/logo.jpg" style="height: 60px; width: 157px;">
          </div>
          <div class="layout-nav">
            <HeaderRight @on-click="setWidth" :widthBool="widthBool" />
          </div>
        </Menu>
      </Header>
      <Layout :class="widthBool? 'width1200': ''">
        <Sider hide-trigger :style="{background: '#495060', minHeight: leftNavHeight, float: 'left'}">
          <Menu :active-name="activeName" theme="dark" width="auto" @on-select="toPath" :open-names="['1']">
            <MenuItem name="/">
              <Icon type="ios-home-outline"></Icon>
              首页
            </MenuItem>
            <MenuItem :name="item.path" v-for="(item, index) in menu" :key="index">
              <Icon :type="item.icon"></Icon>
              {{ item.name }}
            </MenuItem>
            <MenuItem name="1-6">
              <Icon type="ios-cog-outline"></Icon>
              个人设置
            </MenuItem>
          </Menu>
        </Sider>
        <Layout style="padding: 10px; overflow: inherit;" :style="{width: widthBool? '1000px': 'auto', float: 'left'}">
          <div :style="{'min-height': rightNavHeight}"><router-view/></div>
          <div style="text-align: center; line-height: 45px;">
            版权所有 © Copyright 2018 华北科技学院
            <span v-if="isIE" style="color: #ed3f14;">尽量不要使用 <b style="font-size: 16px">IE</b> 内核浏览器</span>
          </div>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import HeaderRight from '../components/HeaderRight'
export default{
  components: {
    HeaderRight
  },
  created() {
    this.activeName = this.$route.meta.menuName || '/'
    if (this.isIE) {
      this.widthBool = true
    }
  },
  computed: {
    isIE() {
      return !!window.ActiveXObject || "ActiveXObject" in window
    },
    windowHeight() {
      return document.documentElement.clientHeight + 'px'
    },
    leftNavHeight() {
      return (document.documentElement.clientHeight - 60) + 'px'
    },
    rightNavHeight() {
      return (document.documentElement.clientHeight - 125) + 'px'
    },
    menu() {
      const { role } = this.$store.getters.getUser
      const menuData = {
        student: [{
          path: '/course',
          icon: 'ios-settings',
          name: '我的课程'
        }, {
          path: '/ios-copy-outline',
          icon: 'ios-copy-outline',
          name: '资料库'
        }, {
          path: '/notice',
          icon: 'ios-bell-outline',
          name: '通知公告'
        }],
        teacher: [{
          path: '/course',
          icon: 'ios-settings',
          name: '我的课程'
        }, {
          path: '/ios-copy-outline',
          icon: 'ios-copy-outline',
          name: '资料库'
        }, {
          path: '/myClasses',
          icon: 'ios-person-outline',
          name: '我的班级'
        }, {
          path: '/notice',
          icon: 'ios-bell-outline',
          name: '通知公告'
        }],
        root: [{
          path: '/course',
          icon: 'ios-settings',
          name: '学科管理'
        }, {
          path: '/ios-copy-outline',
          icon: 'ios-copy-outline',
          name: '教材管理'
        }, {
          path: '/myClasses',
          icon: 'ios-person-outline',
          name: '用户管理'
        }]
      }
      return menuData[role]
    }
  },
  data() {
    return {
      activeName: '/',
      widthBool: false
    }
  },
  methods: {
    toPath(path) {
      this.$router.push({path})
    },
    setWidth() {
      this.widthBool = !this.widthBool
    }
  }
}
</script>
<style scoped>
  .header{
    background: #2990fa;
    height: 60px;
    line-height: 60px;
    padding: 0px;
  }
  .header .ivu-menu-dark{
    background: none !important;
  }
  .layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
  }
  .layout-logo{
    width: 157px;
    height: 60px;
    float: left;
    position: relative;
    top: 0px;
    left: 0px;
  }
  .layout-nav{
    float: right;
    margin: 0 auto;
    margin-right: 10px;
  }
  .header .ivu-menu-horizontal{
    height: 60px;
    line-height: 60px;
  }
  .layout-nav .ivu-menu-item{
    font-size: 16px !important;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active{
    border-right: 0px none;
    background: #2d8cf0;
    color: #fff !important;
    margin: 5px;
  }
  .ivu-menu-vertical.ivu-menu-light:after{
    width: 0px;
  }

  .width1200{
    width: 1200px;
    margin: 0px auto;
  }
</style>
